@extends('layouts.frontend-iframe-base')


@section('css')
    <link href="/dist/frontend/css/list.css" rel="stylesheet">
@stop

@section('content')
        <!-- Content Header (Page header) -->
<section class="content-header">
    {{--<h1>--}}
        {{--系统首页--}}
        {{--<small>欢迎使用</small>--}}
    {{--</h1>--}}
</section>

<!-- Main content -->
<section class="content">


    {{-- content about weather--}}

    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12" >
            <div class="info-box weather" >
                <div class="j-top">
                    <div class="j-top-left">
                        <span class="present" id="J-tmp">--℃</span><br>
                        <span class="range"><small id="J-max">--℃</small>/<small id="J-min">--℃</small></span>
                    </div>
                    <div class="j-top-right">
                        <img id="J-cond" src="">
                        <p class="climate" id="J-climate">--</p>
                        <p class="date" id="J-date">--/--</p>
                    </div>
                </div>

                <div class="j-bottom">
                    <img class="j-logo" src="/dist/frontend/images/logo_06.png">
                    @foreach($sites as $site)
                    <h2>{{$site->name}}</h2>
                    @endforeach
                    <p class="j-location" id="J-address"><img src="/dist/frontend/images/location_03.png">浙江省宁波市慈溪讪中横线浙江天中电器有限公司</p>
                    <div class="j-table">
                        <small> <b id="J-group">--</b><br>分组</small>
                        <small> <b id="J-device">--</b><br>设备</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8 col-sm-6 col-xs-12" >
            <div class="row list">
                <div class="col-md-4 col-sm-6 col-xs-12" >
                    <div class="info-box" style="margin-top:15%;text-align:center;box-shadow:none;text-align:center;">
                        <div class="info-box-content img-responsive img-circle" style="margin-left:0;display:inline-block;background-color:#fff;width:180px;height:180px;border: 5px solid ghostwhite;">
                            <span class="info-box-img" style="margin-top:10px;">
                               <img src="/dist/frontend/images/log_03.png">
                            </span>
                            <span class="info-box-text" style="margin-top:5px;margin-bottom:-5px;font-size:1.2em;color:rgb(146,146,146);">当前工作设备</span>
                            <span class="info-box-number" >
                                <small id="J-working-devices-count" style="font-size:1.4em;" >计算中...&nbsp;</small>
                            </span>
                            <small style="font-size:1.3em;">&nbsp;当前工作设备总计</small>

                            <small >{{$devices_count}}&nbsp;台</small>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-4 col-sm-6 col-xs-12" >
                    <div class="info-box" style="margin-top:15%;text-align:center;box-shadow:none;text-align:center;">
                        <div class="info-box-content img-responsive img-circle" style="margin-left:0;display:inline-block;background-color:#fff;width:180px;height:180px;border: 5px solid ghostwhite;">
                               <span class="info-box-img">
                                  <img src="/dist/frontend/images/log_1.png">
                               </span>
                            <span class="info-box-text" style="font-size:1.3em;margin-top:10px;margin-bottom:-5px;color:rgb(146,146,146);">当日电量</span>
                               <span class="info-box-number" >

                                   <small style="font-size:1.4em" id="J-today-gen-cap">&nbsp;计算中...</small>
                                </span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->

                <!-- fix for small devices only -->
                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-4 col-sm-6 col-xs-12" >
                    <div class="info-box" style="margin-top:15%;text-align:center;box-shadow:none;text-align:center;">
                        <div class="info-box-content img-responsive img-circle" style="margin-left:0;display:inline-block;background-color:#fff;width:180px;height:180px;border: 5px solid ghostwhite;">
                              <span class="info-box-img">
                                  <img src="/dist/frontend/images/log_2.png">
                              </span>
                            <span class="info-box-text" style="font-size:1.3em;margin-top:10px;margin-bottom:-5px;color:rgb(146,146,146);">当月电量</span>
                              <span class="info-box-number ">

                                  <small style="font-size:1.4em" id="J-month-gen-cap">&nbsp;计算中...</small>
                              </span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-4 col-sm-6 col-xs-12" >
                    <div class="info-box" style="text-align:center;box-shadow:none;text-align:center;">
                        <div class="info-box-content img-responsive img-circle" style="margin-left:0;display:inline-block;background-color:#fff;width:180px;height:180px;border: 5px solid ghostwhite;">
                               <span class="info-box-img">
                                   <img src="/dist/frontend/images/log_13.png">
                               </span>
                            <span class="info-box-text" style="font-size:1.3em;margin-top:10px;margin-bottom:-5px;color:rgb(146,146,146);">当年电量</span>
                               <span class="info-box-number" style="margin-bottom: 5px;">

                                  <small style="font-size:1.4em" id="J-year-gen-cap">&nbsp;计算中...</small>
                               </span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-4 col-sm-6 col-xs-12" >
                    <div class="info-box" style="text-align:center;box-shadow:none;text-align:center;">
                        <div class="info-box-content img-responsive img-circle" style="margin-left:0;display:inline-block;background-color:#fff;width:180px;height:180px;border: 5px solid ghostwhite;">
                               <span class="info-box-img">
                                   <img src="/dist/frontend/images/log_14.png">
                               </span>
                            <span class="info-box-text" style="font-size:1.3em;margin-top:10px;margin-bottom:-5px;color:rgb(146,146,146);">发电总量</span>
                               <span class="info-box-number " style="margin-bottom: 5px;">

                                  <small style="font-size:1.4em"  id="J-total-gen-cap">&nbsp;计算中...</small>
                               </span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-4 col-sm-6 col-xs-12" >
                    <div class="info-box" style="text-align:center;box-shadow:none;text-align:center;">
                        <div class="info-box-content img-responsive img-circle" style="margin-left:0;display:inline-block;background-color:#fff;width:180px;height:180px;border: 5px solid ghostwhite;">
                               <span class="info-box-img">
                                   <img src="/dist/frontend/images/log_17.png">
                               </span>
                            <span class="info-box-text" style="font-size:1.3em;margin-top:10px;margin-bottom:-5px;color:rgb(146,146,146);">日峰值日照时间</span>
                               <span class="info-box-number" style="margin-bottom: 5px;">
                                   <small style="font-size:1.4em"  id="J-sunshine-peak-hours">&nbsp;计算中...</small>
                               </span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">总发电数据</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-9">
                            <p class="text-center">
                                <strong>电站发电数据监测</strong>
                            </p>
                            <div id="echarts" style="width: 100%;height: 300px;"></div>
                        </div>
                        <!-- /.col -->
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>请选择类型</label>

                                <div>
                                    <div class="btn-group J-type">
                                        <button type="button" class="btn btn-default active" data-type="energy">
                                            电量
                                        </button>
                                        <button type="button" class="btn btn-default" data-type="power">功率
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>请选择时间单位</label>

                                <div>
                                    <div class="btn-group J-time-type">
                                        <button type="button" class="btn btn-default" data-time-type="m">按月
                                        </button>
                                        <button type="button" class="btn btn-default active" data-time-type="d">
                                            按日
                                        </button>
                                        <button style="display: none;" type="button" class="btn btn-default" data-time-type="h">按小时
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>请选择日期范围</label>

                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" class="form-control pull-right active" id="reservation"
                                           value="{{$begin_date}} - {{$end_date}}">
                                </div>
                                <!-- /.input group -->
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                </div>
                <!-- ./box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>

    <h4>我的电站</h4>

    <div class="row">
        @foreach($sites as $site)
            <div class="col-md-6">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <i class="fa fa-site"></i>

                        <h3 class="box-title">{{$site->name}}</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-5">
                                <img src="{{$site->img}}" class="img-responsive" alt="">
                            </div>
                            <div class="col-md-7">
                                <dl>
                                    <dt>名称</dt>
                                    <dd>{{$site->name}}</dd>
                                    <dt>地址</dt>
                                    <dd>{{$site->province}}{{$site->city}}{{$site->town}}{{$site->address}}</dd>
                                </dl>
                                <a href="/frontend/site/detail?id={{$site->id}}" class="btn btn-info btn-sm"><i
                                            class="fa fa-bar-chart-o"></i>&nbsp;查看数据</a>
                            </div>
                        </div>


                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        @endforeach
    </div>

</section>
<!-- /.content -->


@stop

@section('js')
    <script>
        $(function(){

            function refreshData() {
                $.get('/frontend/index/total-data', function (res) {
                    if (res.status == 1) {

                        toastr.info('发电数据已自动更新', '自动更新');
                        $('#J-working-devices-count').text(res.data.working_devices_count+'台');
                        $('#J-today-gen-cap').text(res.data.today_gen_cap+'mwh');
                        $('#J-month-gen-cap').text(res.data.month_gen_cap+'mwh');
                        if(res.data.year_gen_cap < 1 ) {
                            $('#J-year-gen-cap').text(res.data.year_gen_cap + 'mwh');
                        }else{
                            $('#J-year-gen-cap').text(res.data.year_gen_cap.toFixed(0) + 'mwh');
                        }
                        if(res.data.total_gen_cap < 1 ) {
                            $('#J-total-gen-cap').text(res.data.total_gen_cap + 'mwh');
                        }else {
                            $('#J-total-gen-cap').text(res.data.total_gen_cap.toFixed(0) + 'mwh');
                        }
                        $('#J-sunshine-peak-hours').text(res.data.sunshine_peak_hours+'小时');
                    } else {
                        alert('自动刷新数据出错：' + res.error_msg);
                    }

                }, 'json');
            }
            setInterval(refreshData, 1000 * 60 * 2);
            refreshData();
        });



        var myChart = echarts.init(document.getElementById('echarts'));

        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',

                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            }
        };


        $('#reservation').daterangepicker({
            format: 'YYYY-MM-DD'
        });

        $('#reservation').on('change', function () {
            loadData();
        });

        $('.J-type button').click(function () {
            $(this).parent().find('button').removeClass('active');
            $(this).addClass('active');
            if ($(this).data('type') == 'energy') {
                $('.J-time-type button').each(function () {
                    $(this).removeClass('active');
                    if ($(this).data('time-type') == 'h') {
                        $(this).hide();
                    }
                    if ($(this).data('time-type') == 'd') {
                        $(this).addClass('active');
                    }
                });

            }
            if ($(this).data('type') == 'power') {
                $('.J-time-type button').each(function () {
                    if ($(this).data('time-type') == 'h') {
                        $(this).show();
                    }
                });
            }

            loadData();
        });
        $('.J-time-type button').click(function () {
            $(this).parent().find('button').removeClass('active');
            $(this).addClass('active');
            loadData();
        });

        function loadData() {
            var params = getDataParams();
            myChart.showLoading();
            $.get('/frontend/index/energy-data', params, function (res) {
                if (res.status != 1) {
                    alert(res.error_msg);
                    return;
                }
                var opt= $.extend(true,{},option,{
                    xAxis:{
                        data:res.data.labels
                    },
                    series: [{
                        name: '发电量（kWh）',
                        type: 'bar',
                        barWidth:'10',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: res.data.data
                    }]
                });
                myChart.setOption(opt);
                myChart.hideLoading();
            }, 'json');
        }

        function getDataParams() {
            var start = $('#reservation').data('daterangepicker').startDate.format('YYYY-MM-DD');
            var end = $('#reservation').data('daterangepicker').endDate.format('YYYY-MM-DD');
            var params = {
                start: start,
                end: end,
                type: $('.J-type').find('.active').data('type'),
                time_type: $('.J-time-type').find('.active').data('time-type')
            };
            return params;
        }

        loadData();

    </script>

    <script>
        $(function(){
            $.get('/frontend/index/project-info',function(date){
                if(date.status == 1) {
                    var  province="";
                    var city="";
                    var town="";
                    var address="";
                    $('#J-group').text(date.data.groups);
                    $('#J-device').text(date.data.devices);

                    if(date.data.province != null)province=date.data.province;
                    if(date.data.city != null)city=date.data.city;
                    if(date.data.town != null)town=date.data.town;
                    if(date.data.address!=null)address=date.data.address;

                    $('#J-address').text(province+city+town+date.data.address);

                    var city = date.data.city;
                    var town= date.data.town;
                    var province = date.data.province;
                    $.get('/common/weather', {'city': city,'town':town,'pro':province}, function (res) {
                        if (res.status == 1) {
                            $('#J-tmp').text(res.data.now_tmp + '℃');
                            $('#J-max').text(res.data.max + '℃');
                            $('#J-min').text(res.data.min + '℃');
                            $('#J-climate').text(res.data.txt);
                            $('#J-date').text(res.data.date);
                            $('#J-cond').attr('src', 'http://files.heweather.com/cond_icon/' + res.data.cond + '.png')
                        }

                    });
                }
            });

        });
    </script>

@stop